<template>
  <div class="app-container">
    <div v-if="user">
      <el-row :gutter="20">

        <el-col :span="6" :xs="24">
         <!-- 用户公开信息页-->
          <el-card style="margin-bottom:20px;">
              <div slot="header" class="clearfix">
                <span>个人信息</span>
              </div>

              <div class="user-profile">
                <div class="box-center">
                <pan-thumb :image="user.avatar" :height="'100px'" :width="'100px'" :hoverable="false">
                    <div>Hello</div>
                    
                  </pan-thumb>
                </div>
                <div class="box-center">
                  <div class="user-name text-center">{{ user.userName }}</div>
                  <div class="user-name text-center">{{ user.userAccount }}</div>
                </div>
              </div>

              <div class="user-bio">
                <div class="user-education user-bio-section">
                  <div class="user-bio-section-header"><svg-icon icon-class="education" /><span>个姓签名</span></div>
                  <div class="user-bio-section-body">
                    <div class="text-muted">
                      {{user.userSign}}
                    </div>
                  </div>
                </div>
                 <div v-if="userType ==='2'">
                <div class="user-skills user-bio-section">
                  <div class="user-bio-section-header"><svg-icon icon-class="skill" /><span>实习实训进度</span></div>
                  <div class="user-bio-section-body">
                    <div class="progress-item">
                      <span>周报</span>
                      <el-progress :percentage="UserReportInfo.week" />
                    </div>
                    <div class="progress-item">
                      <span>月报</span>
                      <el-progress :percentage="UserReportInfo.month" />
                    </div>
                    <div class="progress-item">
                      <span>中期报告</span>
                      <el-progress :percentage="UserReportInfo.centre" />
                    </div>
                    <div class="progress-item">
                      <span>实训报告</span>
                      <el-progress :percentage="UserReportInfo.final" />
                    </div>
                  </div>
                </div>
                 </div>
                 <div>
                    <el-button type="text" @click="letter">私信</el-button>
                 </div>
              </div>
            </el-card>
        </el-col>

        <el-col :span="18" :xs="24">
          <el-card>
            <el-tabs v-model="activeTab">
              <el-tab-pane label="实习实训经历" name="timeline">
                <div v-if="userType ==='2'">
                <el-timeline>
                  <el-timeline-item v-for="(item,index) of timeline" :key="index" :timestamp="item.startTime" placement="top">
                    <el-card>
                      <h4>{{ item.internshipName }}</h4>
                      <p>{{ item.content }}</p>
                    </el-card>
                  </el-timeline-item>
                </el-timeline>
                </div>
                <div v-if="userType !=='2'">
                  非学生用户无此数据
                </div>
              </el-tab-pane>
            </el-tabs>
          </el-card>
        </el-col>

      </el-row>
    </div>
  </div>
</template>

<script>
import { getReportProgress } from '@/api/report'
import { getCompanyHistory } from '@/api/binding'
import { getUser } from '@/api/user'
import PanThumb from '@/components/PanThumb'
export default {
  name: 'Profile',
components: { PanThumb },
  data() {
    return {
      user:{},
      activeTab: 'timeline',
       timeline: [],
      param:{
        studentAccount:''
      },
      studentEvolve:{
        weekReport:70,
        monthReport:20,
        centreReport:50,
        finalReport:100
      },
      userType:1,
      UserReportInfo:{}
    }
  },
  created() {
    this.param.studentAccount = this.$route.query.userAccount
    this.userType =  this.$route.query.userType
    console.log(this.userType)
    if(this.userType === '2'){
        //this.getStudentEvolve()
        this.getCompanyHistory()
        this.getReportProgress()
    }
    this.getUser()
    
  },
  methods: {
      async getUser() {
      let res = await getUser(this.param);
      this.user = res.bean;
    },
    async letter() {
       this.$message('发送私信消息'+this.param.studentAccount);
       this.$router.push({
        path: "/notify/chat",
        query:{
          userAccount:this.$route.query.userAccount
        }
        })
    },
    async getStudentEvolve() {
      let res = await getStudentEvolve(this.param);
      this.studentEvolve = res.bean;
    },
    async getCompanyHistory() {
      let res = await getCompanyHistory(this.param);
      this.timeline = res.beans;
    },async getReportProgress() {
      let res = await getReportProgress(this.param)
      this.UserReportInfo = res.bean
    },
  }
}
</script>

<style lang="scss" scoped>
.box-center {
  margin: 0 auto;
  display: table;
}

.text-muted {
  color: #777;
}

.user-profile {
  .user-name {
    font-weight: bold;
  }

  .box-center {
    padding-top: 10px;
  }

  .user-role {
    padding-top: 10px;
    font-weight: 400;
    font-size: 14px;
  }

  .box-social {
    padding-top: 30px;

    .el-table {
      border-top: 1px solid #dfe6ec;
    }
  }

  .user-follow {
    padding-top: 20px;
  }
}

.user-bio {
  margin-top: 20px;
  color: #606266;

  span {
    padding-left: 4px;
  }

  .user-bio-section {
    font-size: 14px;
    padding: 15px 0;

    .user-bio-section-header {
      border-bottom: 1px solid #dfe6ec;
      padding-bottom: 10px;
      margin-bottom: 10px;
      font-weight: bold;
    }
  }
}
</style>
